Day11. MVC網站框架(四)使用EJS樣版動態生成網頁

2017 iT 邦幫忙鐵人賽

DAY 11

自我挑戰組

通過Node.js了解後端運作原理！系列第 11 篇

2017鐵人賽 node.js ejs

Jackson

2016-12-22 21:49:01

10259 瀏覽

分享至

介紹、設定

EJS的全名是「Embedded Javascript」，顧名思義就是內嵌式的樣板引擎，可以將邏輯與內容直接嵌入到HTML頁面上。比起Jade來說更接近一般的網站開發方式，也不用學新的排版語法，只要會基本的HTML就可以了！
首先我們先用npm安裝EJS

npm install EJS

並且建立專案資料夾，裡面分別放上一支app.js以及包含views的資料夾，並在views裡面建立名為index.ejs的樣板，在app.js裡面設定存放樣板的目錄路徑以及選用樣板引擎，跟昨天都一樣，只不過這邊我們用的樣板的副檔名是「ejs」。

使用

EJS使用由"<%"和"%>"所包夾而成標籤，在這標籤裡頭的內容都是動態產生的:

<html>
    <body>
        <h1><%= title %></h1>
        <p><%= description %></p>
    </body>
</html>

我們可以在app.js中傳遞參數給index.ejs

app.get('/', function(req, res){
   //使用index樣板，並可以帶入參數給樣板利用
  res.render('index',{title: 'EJS template',description: 'Website:http://www.embeddedjs.com/'});
});

執行後的結果

可以看到index頁面上印出了"EJS Template"，由此可見<%= title %>裡面的title變數值是由res.render()所繼承而來。
這邊也可以使用一些程式邏輯像是if else判斷、for迴圈把內容印出來，後端語言也是使用類似的語法。

//title變數有資料則印出，無的話使用預設文字
<% if (title) {%>
    <h1><%= title %></h1>
<% } else { %>
    <h1>預設文字</h1>
<% } %>
//印出items陣列中所有數值
<ul>
<% for(var i=0;i<items.length;i++) {%>
    <li><%= items %></li>
<% } %>
</ul>

這邊還能看出一個語法規則，若是要帶出變數值的話，EJS語法要寫成<%= 變數名稱 %>要加上等號，否則會視為邏輯表示片段。